<template>
	<view class="content">
		<view class="head" :style="{marginTop: titleTop + 'px'}">
			<text class="goubt">购物袋 {{ nums }}</text>
		</view>
		<view class="carlist">
			<view class="caritem" v-for="(item,index) in list" :key="index">
				<view class="carshop">
					<image class="gous" @click.stop="getgouone(item,index)" v-if="item.select" src="/static/img/gous.png" />
					<image class="gous" @click.stop="getgouone(item,index)" v-if="!item.select" src="/static/img/gou.png" />
					<view class="shop">
						<image class="icon_dp" src="/static/img/icon_dp.png" />
						<text class="shname txt">{{item.name}}</text>
					</view>
				</view>
				<view class="citems" v-for="(i,ind) in item.list" :key="ind">
					<image class="gous" @click.stop="getgoutwo(item,index,i,ind)" v-if="i.select" src="/static/img/gous.png" />
					<image class="gous" @click.stop="getgoutwo(item,index,i,ind)" v-if="!i.select" src="/static/img/gou.png" />
					<image class="tu" :src="i.goods_image" />
					<view class="carright">
						<text class="cartit txt">{{i.goods_title}}</text>
						<view class="bq">
							<view class="bqitem">{{i.goods_sku_name}}</view>
						</view>
						<view class="jview">
							<text class="jia">￥<text class="jianum">{{i.goods_price}}</text></text>
							<u-number-box class="ml" :min="1" v-model="i.goods_nums" @change="valChange($event,index,ind)"></u-number-box>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="carbot">
			<!-- <image class="gous" @click="getquanxuan" v-if="isquan" src="/static/img/gous.png" />
			<image class="gous" @click="getquanxuan" v-if="!isquan" src="/static/img/gou.png" />
			<text class="qxuan" @click="getquanxuan">全选</text> -->
			
			<text class="heji">合计:<text class="henum">￥{{ total }}</text></text>
			<view class="zong ml">
				<text class="bj" @click="isdel=!isdel">{{ !isdel?'编辑':'完成' }}</text>
				<view class="shan" @click="getdel" v-if="isdel">删除</view>
				<view class="jie" @click="getjiesuan" v-if="!isdel">结算{{ gnum }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invite_code:'',
				titleTop:0,
				value: 1,
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				nums:0,
				total:0,
				gnum:0,
				isquan:false,//是否全选
				isdel:false
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const { top, height } = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop;//设置标题顶部距离
			this.statusBarHeight = statusBarHeight;//设置状态栏高度
			// #endif
			// #ifdef H5
			this.titleTop = 20;//设置标题顶部距离
			// #endif
		},
		onLoad(option) {
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getClear()
				this.getxian()
			}
		},
		methods: {
			async getList(){//列表数据
				let res = await this.$u.api.addCartlists({
				  limit:this.limit,
				  page:this.page
				});
				let shuzu = res.list
				this.nums = res.nums
				for(let i in shuzu){
					shuzu[i].select = false
					for(let j in shuzu[i].list){
						shuzu[i].list[j].select = false
					}
				}
				this.list = shuzu
				// this.last_page = res.lastpage
				// let list = res.list;
				// this.list = this.page == 1 ? list : [...this.list, ...list];	
				// if(res.list==''||Number(list.length)<Number(this.limit)||Number(this.page)>Number(this.last_page)){
				// 	this.status = 'nomore';
				// }
				
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			async valChange(e,index,ind) {
				console.log(index)
				console.log(ind)
				console.log('当前值为: ' + e.value)
				this.getxian()
				
				let res = await this.$u.api.setNums({
					goods_nums:e.value,
					id:this.list[index].list[ind].id
				});

			},
			getgouone(item,index){
				let list = this.list
				let listdata = list[index].list
				
				if(!list[index].select){
					//改成true
					for(let i in listdata){
						listdata[i].select = true
					}
				}else{
					for(let i in listdata){
						listdata[i].select = false
					}
				}

				for(let i in list){ //判断这个店铺选了之后 其他取消
					if(i!=index){
						list[i].select = false
						for(let j in list[i].list){
							list[i].list[j].select = false
						}
					}else{
						list[index].select = !list[index].select
					}
					
				}
				
				
				list[index].list = listdata
				this.list = list
				this.$forceUpdate()
				this.getxian()
			},
			getgoutwo(item,index,i,ind){
				let list = this.list
				let listdata = list[index].list
				list[index].list[ind].select = !list[index].list[ind].select
				let status = true
				for(let i in listdata){
					if(!listdata[i].select){
						status = false
					}
				}
				if(status){
					list[index].select = true
				}else{
					list[index].select = false
				}

				for(let is in list){ //判断这个店铺选了之后 其他取消
					if(is!=index){
						list[is].select = false
						for(let j in list[is].list){
							list[is].list[j].select = false
						}
					}
					
				}
				
				this.list = list
				this.$forceUpdate()
				this.getxian()
			},
			getxian(){
				//处理勾选
				let list = this.list
				let status = true
				for(let i in list){
					if(!list[i].select){
						status = false
					}
				}
				if(status){
					this.isquan = true
				}else{
					this.isquan = false
				}
				
				let total = 0
				let gnum = 0
				for(let i in list){
					for(let j in list[i].list){
						if(list[i].list[j].select){
							total += Number(list[i].list[j].goods_nums)*Number(list[i].list[j].goods_price).toFixed(2)
							gnum += Number(list[i].list[j].goods_nums)
						}
						
					}
				}
				this.total = total
				this.gnum = gnum
				this.$forceUpdate()


			},
			getquanxuan(){
				let shuzu = this.list
				if(this.isquan){
					//改为全部不选
					for(let i in shuzu){
						shuzu[i].select = false
						for(let j in shuzu[i].list){
							shuzu[i].list[j].select = false
						}
					}
				}else{
					for(let i in shuzu){
						shuzu[i].select = true
						for(let j in shuzu[i].list){
							shuzu[i].list[j].select = true
						}
					}
				}
				this.isquan = !this.isquan
				this.list = shuzu
				this.$forceUpdate()
				this.getxian()
			},
			getjiesuan(){
				//结算
				let list = this.list
				let parms = []
				for(let i in list){
					for(let j in list[i].list){
						if(list[i].list[j].select){
							parms.push(list[i].list[j])
						}
						
					}
				}
				if(parms == ''){
					this.$u.toast("请先勾选商品");
					return;
				}
				console.log(parms)
				console.log(JSON.stringify(parms))
				uni.setStorageSync('shopinfo',JSON.stringify(parms))
				this.navrouter(`/pages_client/twoPage/PayOrder?lei=2`)
				// console.log(parms)
			},
			getdel(){//删除
				let list = this.list
				let parms = []
				for(let i in list){
					for(let j in list[i].list){
						if(list[i].list[j].select){
							parms.push(list[i].list[j])
						}
						
					}
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						that.deltwo(parms)
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			},
			async deltwo(parms){
				console.log(parms)
				let ids = []
				for(let i in parms){
					ids.push(parms[i].id)
				}
				let res = await this.$u.api.delAll({
					ids:ids.toString()
				});
				this.$u.toast("操作成功");
				
				this.getClear()
				this.getxian()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 200rpx;
		.head{
			padding: 0 35rpx;
		}
		.goubt{
			font-weight: bold;
			font-size: 38rpx;
			color: #222222;
		}
		.carlist{
			padding: 20rpx;
			.caritem{
				background: #FFFFFF;
				border-radius: 30rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 30rpx;
				
				.carshop{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;
					.gous{
						margin-right: 17rpx;
						width: 38rpx;
						height: 38rpx;
					}
					.shop{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 80%;
						.icon_dp{
							width: 30rpx;
							height: 30rpx;
							margin-right: 9rpx;
						}
						.shname{
							max-width: 80%;
							display: inline-block;
							font-weight: bold;
							font-size: 28rpx;
							color: #272727;
						}
					}
				}
			}
			.citems{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				.gous{
					margin-right: 17rpx;
					width: 38rpx;
					height: 38rpx;
				}
				.tu{
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
				.carright{
					width: 65%;
					padding-left: 20rpx;
					// height: 100%;
					display: flex;
					flex-direction: column;
					.cartit{
						width: 100%;
						display: inline-block;
						font-weight: 800;
						font-size: 32rpx;
						color: #111111;
					}
					.bq{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						.bqitem{
							padding: 3rpx 20rpx;
							background: #F2F2F2;
							border-radius: 10rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}
					}
					.jview{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 30rpx;
						.jia{
							font-weight: 800;
							font-size: 22rpx;
							color: #FF7C41;
							.jianum{
								font-size: 32rpx;
							}
						}
					}
				}
			}
			.citems:last-child{
				margin-bottom: 0;
			}
		}
		.carbot{
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: fixed;
			
			width: 100%;
			// #ifdef H5
			bottom: 50px;
			// #endif
			//  #ifdef MP-WEIXIN
			bottom: 0px;
			// #endif
			.gous{
				width: 37rpx;
				height: 37rpx;
				margin-right: 10rpx;
			}
			.qxuan{
				font-weight: bold;
				font-size: 26rpx;
				color: #444444;
				display: inline-block;
				margin: 0 10rpx 0 5rpx;
			}
			.bj{
				font-weight: bold;
				font-size: 26rpx;
				color: #444444;
				display: inline-block;
				// margin-left: 30rpx;
			}
			.heji{
				font-weight: 500;
				font-size: 24rpx;
				color: #444444;
				.henum{
					font-weight: bold;
					font-size: 30rpx;
					color: #FF7C41;
				}
			}
			.zong{
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.jie{
					margin-left: 30rpx;
					padding: 14rpx 70rpx;
					background: #FF7C41;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}
				.shan{
					margin-left: 30rpx;
					padding: 14rpx 70rpx;
					background: #FF4141;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
